<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>面试邀请</h2>
        </template>
      </PageTitle>
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-col :span="4">
          <el-select
            placeholder="公司名称"
            v-model="list.keyType"
            @change="handleKeyTypeChange"
            clearable
          >
            <el-option
              v-for="item in positionName"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10" type="flex">
            <el-input
              placeholder="请输入搜索内容"
              @keyup.enter.native="handleSearch"
              v-model="list.keyword"
            ></el-input>
            <el-button type="primary" @click="handleSearch">
              <i class="el-icon-search"></i>
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        v-loading="downloadLoading"
        ooltip-effect="dark"
        border
        :data="selJobInterviewLists"
        max-height="600px"
        style="margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          label="求职者姓名"
          align="center"
          width="width"
          prop="contact"
          fixed
        >
          <!-- <template slot-scope="scope">
            <el-link type="primary">{{
              scope.row.contact
            }}</el-link>
          </template> -->
        </el-table-column>
        <el-table-column label="基本信息" align="center" prop="age" fixed>
          <template slot-scope="scope">
            {{ scope.row.age }} / {{ scope.row.sex }} /
            {{ scope.row.education }} / {{ scope.row.experience }}
          </template>
        </el-table-column>
        <el-table-column
          label="职位名称"
          align="center"
          prop="jobname"
          width="130"
          fixed
        >
          <!-- <template slot-scope="scope">
            <el-link type="primary">{{
              scope.row.jobname
            }}</el-link>
          </template> -->
        </el-table-column>
        <el-table-column
          label="企业名称"
          align="center"
          prop="companyname"
          width="220"
        >
          <!-- <template slot-scope="scope">
            <el-link type="primary"
              >{{ scope.row.companyname }}
            </el-link>
          </template> -->
        </el-table-column>
        <el-table-column label="面试时间" align="center" prop="interviewTime">
          <template slot-scope="scope">
            {{ scope.row.interviewTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop="com_name"
          width="220"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="detailClick(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" style="margin-top: 10px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="list.page"
          :page-size="list.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: right"
        >
        </el-pagination>
      </el-row>
    </div>

    <!-- 面试详情 -->
    <el-dialog title="面试详情" :visible.sync="detailDialog">
      <el-form :model="detailForm" label-width="100px" disabled>
        <el-form-item label="求职者姓名">
          <el-input v-model="detailForm.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="detailForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="detailForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="detailForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="detailForm.education"></el-input>
        </el-form-item>
        <el-form-item label="工作经验">
          <el-input v-model="detailForm.experience"></el-input>
        </el-form-item>
        <el-form-item label="职位名称">
          <el-input v-model="detailForm.jobname"></el-input>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="detailForm.companyname"></el-input>
        </el-form-item>
        <el-form-item label="面试时间">
          <el-input :value="detailForm.interviewTime | dateFormat"></el-input>
        </el-form-item>
        <el-form-item label="面试地点">
          <el-input v-model="detailForm.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialog = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selJobInterviewListApi } from "@/api/client";
export default {
  data() {
    return {
      downloadLoading: false,
      detailDialog: false,
      selJobInterviewLists: [], // 面试列表
      list: {
        page: 1,
        pageSize: 10,
        keyType: "",
        keyword: "",
      },
      detailForm: {},
      positionName: [
        { value: 1, label: "公司名称" },
        { value: 2, label: "公司ID" },
        { value: 3, label: "职位名称" },
        { value: 4, label: "职位ID" },
        { value: 5, label: "求职者姓名" },
      ],
    };
  },
  created() {
    this.selJobInterviewList();
  },
  methods: {
    // 点击提交
    handleSearch(val) {
      console.log(val);
      this.selJobInterviewList();
    },
    // 下拉改变时候
    handleKeyTypeChange(val) {
      console.log(val);
      this.list.page = 1;
      this.selJobInterviewList();
    },
    // 列表查询
    async selJobInterviewList() {
      const res = await selJobInterviewListApi(this.list);
      console.log(res);
      this.selJobInterviewLists = res.records;
      this.total = res.total;
    },
    // 点击分页
    handleSizeChange(pageSize) {
      this.list.pageSize = pageSize;
      this.selJobInterviewList();
    },
    // 点击分页
    handleCurrentChange(page) {
      this.list.page = page;
      this.selJobInterviewList();
    },

    // 详情
    detailClick(row) {
      console.log(row);
      this.detailForm = row;
      this.detailDialog = true;
    },
  },
};
</script>

<style scoped></style>
